<template>
  <div class="good">
    <van-tabs v-model:active="active">
      <van-tab v-for="(item, index) in tabList" :title="item.category_name">
        <section>
          <span>价格排序：</span>
          <span @click="up">升序</span>
          <span @click="down">降序</span>
        </section>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="30"
        >
          <div class="count">
            <my-good
              v-for="(item, index) in showList"
              :key="index"
              :itemObj="item"
              @click="$router.push(`/detail/${item.product_id}`)"
            ></my-good>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
    <i class="iconfont icon-huidaodingbu" v-show="isBack" @click="goTop"></i>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch, onMounted } from "vue";
import api from "../api/index";
import myGood from "../components/myGood.vue";
export default {
  components: { myGood },
  setup() {
    const active = ref(0); // tab 切换选中的数据
    const data = reactive({
      tabList: [], // tab 切换的数据
      showList: [], // 展示的商品的数据
      isBack: false, // 是否显示回到顶部
      loading: false, // 加载的动画
      finished: false, // 是否需要继续加载 如果值是true 的话，就不会触发load事件
    });
    api.post("/product/getCategory").then((res) => {
      data.tabList = res.category;
      data.tabList.unshift({ category_id: 0, category_name: "全部" });
      // console.log(data.tabList);
    });
    // const 没有变量提升
    // const getList = (val) => {
    //   let obj = {
    //     categoryID: [val], // 需要传入的id集合
    //     // currentPage: 1, // 拿第一个的数据
    //     // pageSize: 15, // 数据需要15条
    //   };
    //   let URL =
    //     val == 0 ? "/product/getAllProduct" : "/product/getProductByCategory";
    //   api.post(URL, obj).then((res) => {
    //     data.showList = res.Product;
    //   });
    // };
    let obj = {
      categoryID: [], // 需要传入的id集合
      currentPage: 1, // 拿第一个的数据
      pageSize: 6, // 数据需要15条
    };
    const onLoad = () => {
      // 加载的方法
      obj.categoryID = [active.value]
      let URL = active.value? "/product/getProductByCategory":"/product/getAllProduct";
      api.post(URL, obj).then((res) => {
        data.showList = [...data.showList, ...res.Product];
        // console.log(data.showList);
        // let arr = [1,2,3]
        // let arr1 = [4,5,6]
        // console.log([...arr,...arr1]);
        setTimeout(() => {
           data.loading = false;
        }, 1000);
        if (obj.currentPage * obj.pageSize >= res.total) {
          data.finished = true;
        } else {
          obj.currentPage++;
        }
      });
    };
    // getList(0); // 进入页面调用函数拿到所有的数据
    watch(active, (newVal) => {
      // 监听 active 的变化
      obj.currentPage = 1;
      data.showList = [];
      data.finished = false;
      onLoad();
      // console.log();
    });

    const up = () => {
      // 升序的函数
      // sort 数组的排序
      data.showList.sort(
        (a, b) => a.product_selling_price - b.product_selling_price
      );
    };

    const down = () => {
      data.showList.sort(
        (a, b) => b.product_selling_price - a.product_selling_price
      );
    };

    let dom = null; // 滚动容器
    let topNum = 0; // 滚动距离
    const scroll = (e) => {
      // 滚动事件
      topNum = e.target.scrollTop;
      // if(topNum>400){
      //    data.isBack = true
      // } else{
      //    data.isBack = false
      // }
      data.isBack = topNum > 400;
    };
    // onMounted 是vue3的生命周期
    onMounted(() => {
      // 给组件里面的滚动元素绑定 scroll 事件
      dom = document.querySelector(".van-tabs__content");
      dom.onscroll = scroll;
    });
    const goTop = () => {
      // 返回顶部的动画
      let time = setInterval(() => {
        if (topNum <= 0) {
          clearInterval(time);
        } else {
          topNum = topNum - 50;
          dom.scrollTop = topNum;
        }
      }, 10);
    };
    return {
      active,
      ...toRefs(data),
      up,
      down,
      scroll,
      goTop,
      onLoad,
    };
  },
};
</script>
<style lang="scss" scoped>
section {
  font-size: 14px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
}
// :deep(.van-list__loading) {
//   width: 100%;
// }
.van-tabs {
  height: 100%;
}
:deep(.van-tabs__content) {
  height: calc(100% - 44px);
  overflow: auto;
}
.iconfont {
  position: fixed;
  bottom: 100px;
  right: 10px;
  font-size: 50px;
  color: red;
  z-index: 99;
}
</style>